<template>
  <div class="lyouters">
    <!-- <canvas id="lyadmincanvas" @click.stop="handleAnimationState()"></canvas> -->

    <div
      class="login-wrap box"
      v-if="!h5show"
      :style="{ '--animationState': animationState }"
    >
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm login-container"
      >
        <h3 class="title">
          <!-- <div class="login-logo">
            <img style="width: 100%" src="../assets/logo.png" alt="logo" />
          </div> -->
          <!--                <img style="height: 55px;margin-bottom: 10px" src="../assets/logo.png" alt="logo">-->
          <span>{{ $t("login.loginInTitle") }}</span>
        </h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            size="large"
            style="font-size: 16px"
            v-model.trim="ruleForm.username"
            auto-complete="off"
            :placeholder="$t('login.loginAccount')"
            maxlength="60"
          >
            <template #prepend>
              <el-icon :size="20"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            size="large"
            style="font-size: 16px"
            v-model.trim="ruleForm.password"
            auto-complete="off"
            :placeholder="$t('login.loginPWD')"
            maxlength="60"
          >
            <template #prepend>
              <el-icon :size="20"><lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="captcha">
            <el-input type="text"  size="large" style="font-size: 16px" v-model.trim="ruleForm.captcha" auto-complete="off" @keyup.enter="submitForm('ruleForm')" :placeholder="$t('login.code')">
                 <template #prepend>
                    <el-icon :size="20"><circle-check /></el-icon>
                  </template>
                  <template #append>
                    <img class="login-code" :src="image_base" @click="getCaptcha"/>
                  </template>
            </el-input>
          </el-form-item> -->
        <el-checkbox class="remember" v-model="rememberpassword">{{
          $t("login.rememberMe")
        }}</el-checkbox>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            size="large"
            :loading="loadingLg"
            style="width: 100%; font-size: 18px"
            @click="submitForm('ruleForm')"
            >{{ $t("login.login") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-if="h5show" class="h5showC">
      <div class="h5show_top">
        <div class="top_one">
          <div class="top_one_text">Hello!</div>
          <div>欢迎登录执行管理平台</div>
        </div>
      </div>
      <div class="login_info">
        <el-form
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              size="large"
              style="font-size: 16px"
              v-model.trim="ruleForm.username"
              auto-complete="off"
              :placeholder="$t('login.loginAccount')"
              maxlength="60"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              size="large"
              style="font-size: 16px"
              v-model.trim="ruleForm.password"
              auto-complete="off"
              :placeholder="$t('login.loginPWD')"
              maxlength="60"
            >
            </el-input>
          </el-form-item>
           
          <el-form-item style="width: 100%;margin: 50px 0 0 0;">
            <el-button
              type="success"
              size="large"
              :loading="loadingLg"
              style="width: 100%; font-size: 14px;background: #22bf57;border-radius:10px;"
              @click="submitForm('ruleForm')"
              >立即登录</el-button
            >
          </el-form-item> 
        </el-form>
      </div>
      <!-- <div style="padding: 0 30px; margin: 50px 0 0 0">
        <t-button
          size="large"
          style="
            width: 100%;
            background: #22bf57;
            border-color: #22bf57;
            color: #fff;
          "
          block
          >填充按钮</t-button
        >
      </div> -->
    </div>
  </div>
</template>
<script >
import { login, apiSystemWebRouter, getCaptcha } from "@/api/api";
import { systemTree, halsgrd } from "@/utils/menuTree.js";
import { delCookie, getCookie, setCookie } from "@/utils/util";
import { useMutitabsStore } from "@/store/mutitabs";
import { useSiteThemeStore } from "@/store/siteTheme";
import { setStorage, getStorage } from "@/utils/util";
import i18n from "@/locales";

export default {
  name: "login",
  setup() {
    const mutitabsstore = useMutitabsStore();
    const siteThemeStore = useSiteThemeStore();
    const { t } = i18n.global;
    return { mutitabsstore, siteThemeStore, t };
  },
  data() {
    return {
      h5show: false,
      loadingLg: false,
      logining: false,
      rememberpassword: false,
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
        captchaKey: null,
      },
      loginFlag: false,
      rules: {
        username: [
          {
            required: true,
            message: this.t("login.AccountError"),
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: this.t("login.PWError"), trigger: "blur" },
        ],
        // captcha: [{required: true, message: this.t('login.codeError'), trigger: 'blur'}],
      },
      image_base: null,
      allmenu: [],
      language: this.siteThemeStore.language,
      lang: [
        {
          name: "简体中文",
          value: "zh-cn",
        },
        {
          name: "English",
          value: "en",
        },
      ],
      //动画
      animationState: "paused",
      WIDTH: "",
      HEIGHT: "",
      POINT: "",
      canvas: null,
      context: null,
      circleArr: [],
      beginX: null,
      beginY: null,
      closeX: null,
      closeY: null,
      moveX: null,
      moveY: null,
      x: null,
      y: null,
      r: null,
      o: null,
    };
  },
  mounted() {
    // this.init();
    let that = this;
    setInterval(function () {
      for (var i = 0; i < that.POINT; i++) {
        var cir = that.circleArr[i];
        cir.x += cir.moveX;
        cir.y += cir.moveY;
        if (cir.x > that.WIDTH) cir.x = 0;
        else if (cir.x < 0) cir.x = that.WIDTH;
        if (cir.y > that.HEIGHT) cir.y = 0;
        else if (cir.y < 0) cir.y = that.HEIGHT;
      }
      // that.draw();
    }, 25);
    window.addEventListener("resize", this.listenResize);
  },
  unmounted() {
    // 页面销毁，去掉监听事件
    window.removeEventListener("resize", this.listenResize);
  },
  created() {
    //动态添加该页面meta viewport 手机适配
    // if (document.querySelector("meta[name='viewport']")) {
    //   document.querySelector("meta[name='viewport']")["content"] =
    //     "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no";
    // }
    // this.getCurrentWith();
    //请求数据
    // this.getuserpassword();
    // this.getCaptcha() //获取验证码
    this.checkMobileRedirect();
  },
  beforeRouteLeave(to, form, next) {
    //离开页面去除动态添加该页面meta viewport 手机适配
    // document.querySelector("meta[name='viewport']")["content"] = this.getCurrentWith()
    next();
  },
  methods: {
    checkMobileRedirect() {
      const isMobile = window.innerWidth <= 768; // 判断是否为移动端
      if (isMobile) {
        this.h5show = true; // 跳转到 h5_login 页面
      }
    },
    //设置主题
    setSiteTheme() {
      if (this.siteThemeStore.siteTheme == "light") {
        this.siteThemeStore.setSiteTheme("dark");
      } else {
        this.siteThemeStore.setSiteTheme("light");
      }
    },
    //设置语言
    changeLang(command) {
      this.language = command.value;
      this.siteThemeStore.setLanguage(command.value);
    },
    handleAnimationState() {
      if (this.animationState === "paused") {
        this.animationState = "running";
      } else {
        this.animationState = "paused";
      }
    },
    // 计算搜索栏的高度
    listenResize() {
      this.$nextTick(() => {
        // this.init();
      });
    },
    //线条：开始xy坐标，结束xy坐标，线条透明度
    Line(x, y, _x, _y, o) {
      (this.beginX = x),
        (this.beginY = y),
        (this.closeX = _x),
        (this.closeY = _y),
        (this.o = o);
      return {
        beginX: x,
        beginY: y,
        closeX: _x,
        closeY: _y,
        o: o,
      };
    },
    //点：圆心xy坐标，半径，每帧移动xy的距离
    Circle(x, y, r, moveX, moveY) {
      (this.x = x),
        (this.y = y),
        (this.r = r),
        (this.moveX = moveX),
        (this.moveY = moveY);
      return {
        x: x,
        y: y,
        r: r,
        moveX: moveX,
        moveY: moveY,
      };
    },
    //生成max和min之间的随机数
    num(max, _min) {
      var min = arguments[1] || 0;
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // 绘制原点
    drawCricle(cxt, x, y, r, moveX, moveY) {
      var circle = this.Circle(x, y, r, moveX, moveY);
      cxt.beginPath();
      cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI);
      cxt.closePath();
      cxt.fill();
      return circle;
    },
    //绘制线条
    drawLine(cxt, x, y, _x, _y, o) {
      var line = this.Line(x, y, _x, _y, o);
      cxt.beginPath();
      cxt.strokeStyle = "rgba(0,0,0," + o + ")";
      cxt.moveTo(line.beginX, line.beginY);
      cxt.lineTo(line.closeX, line.closeY);
      cxt.closePath();
      cxt.stroke();
    },
    //初始化生成原点
    init() {
      //定义画布宽高和生成点的个数
      this.WIDTH = window.innerWidth;
      this.HEIGHT = window.innerHeight;
      this.POINT = 18;
      this.canvas = document.getElementById("lyadmincanvas");
      (this.canvas.width = this.WIDTH - 2),
        (this.canvas.height = this.HEIGHT - 2);
      this.context = this.canvas.getContext("2d");
      (this.context.strokeStyle = "rgba(0,0,0,0.06)"),
        (this.context.strokeWidth = 1),
        (this.context.fillStyle = "rgba(0,0,0,0.05)");
      this.circleArr = [];
      for (var i = 0; i < this.POINT; i++) {
        this.circleArr.push(
          this.drawCricle(
            this.context,
            this.num(this.WIDTH),
            this.num(this.HEIGHT),
            this.num(18, 5),
            this.num(20, -20) / 40,
            this.num(20, -20) / 40
          )
        );
      }
      // this.draw();
    },

    //每帧绘制
    draw() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      for (var i = 0; i < this.POINT; i++) {
        this.drawCricle(
          this.context,
          this.circleArr[i].x,
          this.circleArr[i].y,
          this.circleArr[i].r
        );
      }
      for (var i = 0; i < this.POINT; i++) {
        for (var j = 0; j < this.POINT; j++) {
          if (i + j < this.POINT) {
            var A = Math.abs(this.circleArr[i + j].x - this.circleArr[i].x),
              B = Math.abs(this.circleArr[i + j].y - this.circleArr[i].y);
            var lineLength = Math.sqrt(A * A + B * B);
            var C = (1 / lineLength) * 7 - 0.009;
            var lineOpacity = C > 0.03 ? 0.03 : C;
            if (lineOpacity > 0) {
              this.drawLine(
                this.context,
                this.circleArr[i].x,
                this.circleArr[i].y,
                this.circleArr[i + j].x,
                this.circleArr[i + j].y,
                lineOpacity
              );
            }
          }
        }
      }
    },
    getCurrentWith() {
      var designWidth = 375;
      var deviceWidth =
        parseInt(window.screen.width) ||
        parseInt(document.documentElement.clientWidth); //获取当前设备的屏幕宽度
      // var deviceScale = deviceWidth/designWidth;
      var deviceScale = 0.6;
      var ua = navigator.userAgent;
      //获取当前设备类型（安卓或苹果）

      if (ua && /Android (\d+.\d+)/.test(ua)) {
        // +",user-scalable=no"
        return (
          "width=680,initial-scale=" +
          deviceScale +
          ",minimum-scale=" +
          deviceScale +
          ",maximum-scale=" +
          deviceScale
        );
      } else if (ua && /iPhone|ipad|ipod|ios/.test(ua)) {
        return (
          "width=680,initial-scale=" +
          deviceScale +
          ",minimum-scale=" +
          deviceScale +
          ",maximum-scale=" +
          deviceScale
        );
      } else {
        return "";
      }
    },
    // 获取用户名密码
    // 获取菜单
    getMenu() {
      this.menuTitle = "";
      this.allmenu = [];
      this.loadingLg = true;
      apiSystemWebRouter().then((res) => {
        if (res.code == 2000) {
          let menuTree = [];
          if (res.data.data.length > 0) {
            let childrenList = res.data.data.filter(
              (item) => item.parent && item.visible == 1
            );
            let parentList = res.data.data.filter(
              (item) => !item.parent && item.visible == 1
            );
            if (parentList.length > 0) {
              parentList.forEach((item) => {
                let menuTreeChildren = [];
                let children = childrenList.filter(
                  (itema) => itema.parent == item.id
                );
                let children2 = childrenList.filter((item) => {
                  return children.every((item1) => {
                    return item.path != item1.path;
                  });
                });
                children.forEach((itemb) => {
                  let cmenuTreeChildren = [];
                  let cchildren = children2.filter(
                    (itemc) => itemc.parent == itemb.id
                  );
                  console.log(cchildren, "----------------cchildren");
                  cchildren.forEach((itemd) => {
                    cmenuTreeChildren.push({
                      text: itemd.name,
                      id: itemd.id,
                      attributes: {
                        url: itemd.web_path,
                        icon: itemd.icon,
                      },
                      hasChildren: false,
                      hasParent: true,
                    });
                  });
                  let chasChildren = false;
                  if (cmenuTreeChildren.length > 0) {
                    chasChildren = true;
                  }
                  menuTreeChildren.push({
                    text: itemb.name,
                    id: itemb.id,
                    attributes: {
                      url: itemb.web_path,
                      icon: itemb.icon,
                    },
                    children: cmenuTreeChildren,
                    hasChildren: chasChildren,
                    hasParent: true,
                  });
                });
                menuTree.push({
                  text: item.name,
                  id: item.id,
                  attributes: {
                    url:
                      children.length > 0
                        ? children[0].web_path
                        : item.web_path,
                    icon: item.icon,
                  },
                  hasChildren: children.length > 0,
                  hasParent: false,
                  children: menuTreeChildren,
                  // hidden:true
                });
                item.children = [...children];
              });
            }

            // 操作权限管控
            let menuList = [];
            res.data.data.forEach((item) => {
              //console.log(item,'item---- 菜单权限---')
              menuList.push({
                url: item.web_path,
                moduleName: item.name,
                menuPermission: item.menuPermission,
              });
            });
            setStorage("menuList", JSON.stringify(menuList));
          }
          // console.log(menuTree,'menuTree-----')
          this.allmenu = menuTree;
          if (this.allmenu.length > 0) {
            this.$nextTick(() => {
              this.$router.replace({
                path: `/${this.allmenu[0].attributes.url}`,
              });
            });
          } else {
            this.mutitabsstore.logout("false");
            this.$router.push({ path: "/login" });
            sessionStorage.clear();
            localStorage.clear();
            this.loadingLg = false;
            this.$message.warning("暂无授权任何菜单权限~");
          }

          // setStorage("allmenu", JSON.stringify(this.allmenu));
          //优化首次登录第一个标签显示问题
          let tabsPage = "";
          let TabsValue = "";
          if (menuTree[0].hasChildren) {
            tabsPage = [
              {
                title: menuTree[0].children[0].text,
                name: menuTree[0].children[0].attributes.url,
                query: {},
              },
            ];
            TabsValue = menuTree[0].children[0].attributes.url;
          } else {
            tabsPage = [
              {
                title: menuTree[0].text,
                name: menuTree[0].attributes.url,
                query: {},
              },
            ];
            TabsValue = menuTree[0].attributes.url;
          }
          this.mutitabsstore.firstTabs([tabsPage, TabsValue]);
          this.$forceUpdate();
        } else {
          this.$message.warning(res.msg);
        }

        this.loadingLg = false;
      });

      this.$forceUpdate();
    },
    // handleMenuVisibility(menusArr, groupId) {
    //   if (menusArr.includes(menu.id)) {

    // }
    // },
    getMenuTwos(groupId) {
      console.log("sadsadsadasd");

      this.menuTitle = "";
      this.allmenu = [];
      this.loadingLg = true;
      // 获取名称为 'index' 的路由对象
      let routes = this.$router.options.routes.find(
        (route) => route.name === "index"
      );
      routes = routes.children;
      // 操作权限管控
      let menuList = routes.map((item) => {
        return item;
      });

      setStorage("menuList", JSON.stringify(menuList));
      const buildMenuTree = (routes) => {
        return routes.map((route) => {
          console.log(route, "route");
          const { path, name, meta, children } = route;
          const menu = {
            name: name,
            attributes: {
              url: path,
              icon: meta.icon,
              h5url: 1,
            },
            hasChildren: !!children && children.length > 0,
            hasParent: false,
            children: children ? buildMenuTree(children) : [],
          };
          return menu;
        });
      };
      // console.log(groupId,'--------1')
      // console.log(groupId,halsgrd(groupId),'---------------groupId')

      let systemTrees = halsgrd(groupId);
      console.log(systemTrees, "------------systemTrees");
      this.allmenu = systemTrees.map((item) => {
        // 父节点替换成子的url 第一个子
        if (item.children) {
          // groupId
          item.attributes.url = item.children[0].attributes.url;
        }
        // true为显示false为隐藏
        // if((item.onShowsArr&&item.onShowsArr.includes(groupIds))||(!item.onShowsArr&&item.onShowsArr.includes(groupIds)))
        item.hidden = true;
        return item;
      });

      if (this.allmenu.length > 0) {
        this.$nextTick(() => {
          console.log(this.allmenu, "allmenu");
          this.$router.replace({ path: `${this.allmenu[0].attributes.url}` });
        });
      } else {
        this.mutitabsstore.logout("false");
        this.$router.push({ path: "/login" });
        sessionStorage.clear();
        localStorage.clear();
        this.loadingLg = false;
        this.$message.warning("暂无授权任何菜单权限~");
      }

      setStorage("allmenu", JSON.stringify(this.allmenu));
      // setStorage("allmenu", JSON.stringify(systemTree));
      // 优化首次登录第一个标签显示问题
      let tabsPage = "";
      let TabsValue = "";
      console.log(this.allmenu, "-------------this.allmenu[0]");
      if (this.allmenu[0].hasChildren) {
        tabsPage = [
          {
            title: this.allmenu[0].children[0].text,
            name: this.allmenu[0].children[0].attributes.url,
            query: {},
          },
        ];
        TabsValue = this.allmenu[0].children[0].attributes.url;
      } else {
        console.log(this.allmenu, "----------------------------this.allmenu");
        tabsPage = [
          {
            title: this.allmenu[0].text,
            name: this.allmenu[0].attributes.url,
            query: {},
          },
        ];
        TabsValue = this.allmenu[0].attributes.url;
      }
      console.log(tabsPage, TabsValue, "--------------测试");
      this.mutitabsstore.firstTabs([tabsPage, TabsValue]);

      this.loadingLg = false;
      this.$forceUpdate();
    },

    getuserpassword() {
      if (getCookie("username") != "" && getCookie("password") != "") {
        this.ruleForm.username = getCookie("username");
        this.ruleForm.password = getCookie("password");
        this.rememberpassword = true;
      }
    },

    /**
     * 获取验证码
     */
    getCaptcha() {
      getCaptcha().then((ret) => {
        this.ruleForm.captcha = null;
        this.ruleForm.captchaKey = ret.data.data.key;
        this.image_base = ret.data.data.image_base;
      });
    },

    //获取info列表
    submitForm(formName) {
      console.log(this.ruleForm, "获取列表数据");
      // if (this.ruleForm.captcha == null) {
      //   this.$message.error('请输入验证码！')
      //   return false
      // }
      if (this.ruleForm.username)
        this.ruleForm.account = this.ruleForm.username; //替换原始账号
      console.log(this.ruleForm, "获取列表数据");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingLg = true;
          login(this.ruleForm).then(async (res) => {
            this.loadingLg = false;
            if (res.code === 1) {
              console.log(res);
              if (this.rememberpassword) {
                //保存帐号到cookie，有效期7天
                await setCookie("username", this.ruleForm.username, 7);
                //保存密码到cookie，有效期7天
                await setCookie("password", this.ruleForm.password, 7);
              } else {
                await delCookie("username");
                await delCookie("password");
              }
              this.mutitabsstore.setUserInfo(JSON.stringify(res.data.userinfo));
              this.mutitabsstore.setLogintoken(res.data.userinfo.token);
              this.mutitabsstore.setUserName(res.data.userinfo.nickname);
              this.mutitabsstore.setUserId(res.data.userinfo.user_id);
              this.mutitabsstore.setRefresh(res.data.userinfo.expires_in);
              this.mutitabsstore.setGroupId(res.data.userinfo.group_id);
              // this.getMenu(); //获取菜单
              this.getMenuTwos(res.data.userinfo.group_id);
            } else {
              // this.getCaptcha()
              console.log(res, "----------------res");
              this.$message.error(res.msg);
              return false;
            }
          });
        } else {
          this.$message.error("请输入用户名密码/验证码！");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//django-vue-lyadmin css
::v-deep(.el-input__inner) {
  &::placeholder {
    font-size: 14px !important;
  }
}
::v-deep(.el-input-group__append) {
  background-color: var(--el-bg-color) !important;
  width: 70px;
}
::v-deep(.el-input-group__prepend) {
  background-color: var(--el-bg-color) !important;
  .el-icon {
    color: var(--el-color-primary);
  }
}
.lyouters {
  width: 100%;
  height: 100%;
}
.login-config {
  position: absolute;
  top: 20px;
  right: 20px;
}
::v-deep(.lydpselected) {
  background-color: var(--el-dropdown-menuItem-hover-fill);
  color: var(--el-dropdown-menuItem-hover-color);
}
.login-logo {
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-box-shadow: 0 4px 40px rgb(0 0 0 / 7%);
  box-shadow: 0 4px 40px rgb(0 0 0 / 7%);
  background-color: var(--el-bg-color);
  z-index: 10;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.login-copyright {
  color: #999;
  width: 100%;
  position: fixed;
  bottom: 30px;
  text-align: center;
}
.login-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .login-container {
    inset: 2px;
    z-index: 2;
    border-radius: 10px;
    margin: 0px auto;
    width: 374px;
    height: 469px;
    padding: 30px 35px 15px 35px;
    background: var(--el-bg-color);
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 19px;
    margin: 0px auto 25px auto;
    color: var(--el-color-primary);
    font-weight: 700;
  }
  .remember {
    margin: 0px 0px 15px 0px;
  }
}
.market-login {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  border-radius: 8px;
  background: var(--el-bg-color);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
  .login-container1 {
    width: 510px;
    margin-left: 95px;
    .login-img {
      width: 500px;
    }
    .title {
      font-size: 48px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: var(--el-color-primary);
      line-height: 67px;
      letter-spacing: 1px;
      margin: 60px auto 72px;
    }
    .el-form-item {
      margin-bottom: 72px;
      input {
        padding: 0;
        text-indent: 0;
        margin-top: 20px;
      }
      .el-form-item__label {
        font-size: 20px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.56);
        line-height: 28px;
      }
    }
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "";
    }
    .el-input__inner {
      border: 0 !important;
      border-bottom: 2px solid rgba(0, 0, 0, 0.16) !important;
      border-radius: 0;
      font-size: 24px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.84);
    }
    .el-input {
      position: relative;
    }
    .el-input:after {
      position: absolute;
      content: "";
      width: 0;
      height: 2px;
      left: 0;
      bottom: 3px;
      z-index: 2;
      transition: all 0.5s;
      background: #0072ff;
    }
    .el-input.hasTxt:after {
      width: 100%;
      .el-input__inner {
        border-right: 0 !important;
      }
    }
    .loadingLg {
      width: 100%;
      height: 72px;
      background: #0072ff;
      box-shadow: 0px 5px 15px 0px rgba(0, 114, 255, 0.25);
      border-radius: 4px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: var(--el-bg-color);
    }
  }
}
@media only screen and (max-width: 450px) {
  .box {
    width: 100% !important;
    // margin: 20px;
  }
}
@media screen and (max-width: 1600px) {
  .market-login {
    width: 1050px;
    .login-img {
      width: 350px;
    }

    .login-container1 {
      .el-form-item {
        margin-bottom: 50px;
      }
      .title {
        margin: 40px auto;
      }
    }
  }
}
.login-code {
  height: 40px - 2px;
  display: block;
  margin: 0px -20px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.box {
  width: 450px;
  height: 520px;
  background: var(--el-bg-color);
  overflow: hidden;
  border-radius: 10px;
}
.box::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 450px;
  height: 520px;
  transform-origin: bottom right;
  background: linear-gradient(
    0deg,
    transparent,
    var(--el-color-primary),
    var(--el-color-primary)
  );
  animation: animate 10s linear infinite var(--animationState);
  animation-play-state: var(--animationState);
  -webkit-animation-play-state: var(--animationState);
}

.box::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 450px;
  height: 520px;
  transform-origin: bottom right;
  background: linear-gradient(
    0deg,
    transparent,
    var(--el-color-primary),
    var(--el-color-primary)
  );
  animation: animate 10s linear infinite var(--animationState);
  animation-delay: -5s;
  animation-play-state: var(--animationState);
  -webkit-animation-play-state: var(--animationState);
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

<style lang="scss" scoped>
//django-vue-lyadmin css
::v-deep(.el-input__inner) {
  &::placeholder {
    font-size: 14px !important;
  }
}
::v-deep(.el-input-group__append) {
  background-color: var(--el-bg-color) !important;
  width: 70px;
}
::v-deep(.el-input-group__prepend) {
  background-color: var(--el-bg-color) !important;
  .el-icon {
    color: var(--el-color-primary);
  }
}
.lyouters {
  width: 100%;
  height: 100%;
}
.login-config {
  position: absolute;
  top: 20px;
  right: 20px;
}
::v-deep(.lydpselected) {
  background-color: var(--el-dropdown-menuItem-hover-fill);
  color: var(--el-dropdown-menuItem-hover-color);
}
.login-copyright {
  color: #999;
  width: 100%;
  position: fixed;
  bottom: 30px;
  text-align: center;
}
.login-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .login-container {
    z-index: 2;
    border-radius: 10px;
    margin: 0px auto;
    width: 100%;
    max-width: 330px;
    padding: 30px 20px 20px 20px;
    background: var(--el-bg-color);
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 19px;
    margin: 0px auto 25px auto;
    color: var(--el-color-primary);
    font-weight: 700;
  }
  .remember {
    margin: 0px 0px 15px 0px;
  }
}
.box {
  width: 100%;
  height: 100%;
  background: var(--el-bg-color);
  overflow: hidden;
  border-radius: 10px;
}
.box::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform-origin: bottom right;
  background: linear-gradient(
    0deg,
    transparent,
    var(--el-color-primary),
    var(--el-color-primary)
  );
  animation: animate 10s linear infinite var(--animationState);
  animation-play-state: var(--animationState);
  -webkit-animation-play-state: var(--animationState);
}

.box::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform-origin: bottom right;
  background: linear-gradient(
    0deg,
    transparent,
    var(--el-color-primary),
    var(--el-color-primary)
  );
  animation: animate 10s linear infinite var(--animationState);
  animation-delay: -5s;
  animation-play-state: var(--animationState);
  -webkit-animation-play-state: var(--animationState);
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 450px) {
  .login-container {
    padding: 20px 15px 15px 15px;
  }
  .title {
    font-size: 18px;
    margin: 0px auto 20px auto;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-button {
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
.h5showC {
  height: 100vh;
  background: linear-gradient(to top, #ffffff 40%, transparent 100%),
    linear-gradient(130deg, #fffaeb -15%, #e3ffe0 100.54%);
  .h5show_top {
    height: 300px;
    line-height: 30px;
    padding: 20px 30px;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  // 修改 t-input 的 placeholder 字体大小

  .login_info {
    padding: 0 30px;
    box-sizing: border-box;
  }
  
}
</style>
<style>
.h5showC .el-input__wrapper{
    background-color:transparent !important;
    box-shadow:none !important;
    border-bottom: 1px solid #d8d8d8 ;
  }
  .h5showC .el-input__wrapper:hover{
    border-bottom: 1px solid #22bf57 ;

  }
</style>

